<template>
  <div class="content">
    <Form ref="formValidate" :model="form" :label-width="100">
      <div class="formBox" style="margin-bottom:20px">
        <div class="formBox-item">
          <FormItem label="食材名称" prop="foodName" :label-width="80">
            <Input
              v-model="form.foodName"
              maxlength="20"
              clearable
              placeholder="请输入食材名称"
              style="width: 200px"
            >
            </Input>
          </FormItem>
        </div>
        <div class="formBox-item">
          <FormItem label="供应商名称" prop="supplyName">
            <Input
              v-model="form.supplyName"
              maxlength="20"
              clearable
              placeholder="请输入供应商名称"
              style="width: 200px"
            >
            </Input>
          </FormItem>
        </div>
        <div class="formBox-item">
          <FormItem label="商品种类" prop="foodTypeName" :label-width="80">
            <Select
              v-model="form.foodTypeName"
              style="width:200px"
              placeholder="请选择商品种类"
              clearable
            >
              <Option
                :value="item.categoryName"
                v-for="(item, index) in productcategoryList"
                :key="index"
                >{{ item.categoryName }}</Option
              >
            </Select>
          </FormItem>
        </div>
        <cusButton
          class="mr_20"
          type="primary"
          @onClick="
            pages.page = 1;
            onInit();
          "
          >查询</cusButton
        >
        <cusButton class="mr_20" type="primary" @onClick="reset()"
          >重置</cusButton
        >
      </div>
    </Form>
    <div class="content-bottom">
      <div class="btnBox">
        <div class="btnBox-item">
          <!-- <cusButton class="mr_20" type="primary" @onClick="handleSelectAll()" ghost>全选</cusButton>
                    <cusButton class="mr_20" type="error" ghost @onClick="onDelete()">删除</cusButton> -->
        </div>
        <div class="btnBox-item">
          <cusButton
            class="mr_20"
            type="primary"
            @onClick="onExport2()"
            v-permission="60"
            >导出供应信息</cusButton
          >
          <cusButton type="primary" @onClick="onExport()"
            >导出食材二维码</cusButton
          >
        </div>
      </div>
      <div class="tableBox">
        <cus-table
          border
          :loading="loading"
          :columns="columns"
          :data="data"
          ref="selection"
          @on-selection-change="changeSelect"
          :bottomClass="['cus-page']"
        >
          <template slot-scope="{ row }" slot="weightFlag">
            <div>{{ row.weightFlag == 0 ? "否" : "是" }}</div>
          </template>
        </cus-table>
        <div style="width: 100%;display: flex;justify-content: flex-end">
          <cus-page
            :data="pages"
            class="mt_10"
            @pageChange="selectFoodRaisePageApi()"
          ></cus-page>
        </div>
      </div>
    </div>
    <!-- 导入 -->
    <cus-uploadModal
      ref="cusUploadNutritionTagModal"
      :temp-src="exportNutritionTagTemp"
      :uploadFnc="uploadNutritionTag"
      :titleName="importName"
      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
      @onError="onError"
      @onOk="onInit"
    ></cus-uploadModal>
    <!-- 添加、编辑供应信息 -->
    <addSupplyinfoModal ref="addSupplyinfoModal"></addSupplyinfoModal>
    <!-- 解析供应信息生成excel -->
    <scanAcceptedOrder ref="scanAcceptedOrder"></scanAcceptedOrder>
  </div>
</template>

<script>
import {
  selectFoodRaisePage,
  exportFoodRaiseQRCodeExcel,
  productcategory,
  downloadFoodRaiseExcelTemplate,
  foodRaiseImportExcel,
  batchDeleteFoodRaise,
  foodRaiseExportExcel
} from "@/api/business/dishesModule";
import addSupplyinfoModal from "./components/addSupplyinfoModal";
import scanAcceptedOrder from "./components/scanAcceptedOrder";
export default {
  components: { addSupplyinfoModal, scanAcceptedOrder },
  data() {
    return {
      ruleValidate: {},
      form: {
        foodName: "", // 食材名称
        foodTypeName: "", // 商品分类
        supplyName: "" // 供应商名称
      },
      productcategoryList: [], // 商品分类列表
      exportNutritionTagTemp: "", // 下载模板地址
      uploadNutritionTag: foodRaiseImportExcel,
      importName: "供应信息导入",
      loading: false,
      data: [],
      columns: [
        // {
        //   type: "selection",
        //   width: 60,
        //   align: "center"
        // },
        {
          title: "序号",
          width: 70,
          type: "index",
          align: "center"
        },
        {
          title: "食材名称",
          key: "foodName",
          align: "center"
        },
        {
          title: "商品种类",
          key: "productCategory",
          align: "center"
        },
        {
          title: "供应商",
          key: "supplyName",
          align: "center"
        },
        {
          title: "单位重量/kg",
          key: "unitWeight",
          align: "center"
        },
        {
          title: "价格（包装价格）",
          key: "packagingPrice",
          align: "center",
          width: 150
        },
        {
          title: "计量单位",
          key: "packagingUtil",
          align: "center"
        },
        {
          title: "称重入库",
          slot: "weightFlag",
          align: "center"
        },
        {
          title: "品牌",
          key: "brand",
          align: "center"
        },
        {
          title: "条码",
          key: "snCode",
          align: "center"
        },
        {
          title: "生效日期",
          key: "effectiveDate",
          align: "center"
        }
        // {
        //     title: '操作',
        //     width: 150,
        //     fixed: 'right',
        //     slot: 'operation',
        //     align: 'center'
        // },
      ],
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      },
      selectData: [] // 选中数据
    };
  },
  mounted() {
    this.onInit();
    this.productcategoryApi();
  },
  methods: {
    // 初始化
    onInit() {
      this.selectFoodRaisePageApi();
    },
    exprotInit() {},
    onError(data) {
      console.log(data);
      if (data.retCode == 2888) {
        let content = "";
        data.data.map(it => {
          content += `<p style="margin-top:5px">${it}</p>`;
        });
        this.$Modal.warning({
          title: data.retMsg,
          content: content,
          width: "600",
          okText: "关闭"
        });
      }
    },
    // 重置搜索
    reset() {
      this.$refs["formValidate"].resetFields();
      this.onInit();
    },
    // 解析
    onScan() {
      this.$refs["scanAcceptedOrder"].show();
    },
    // 导出商品二维码
    onExport() {
      this.exportFoodRaiseQRCodeExcelApi();
    },
    // 导出供应信息
    onExport2() {
      this.foodRaiseExportExcelApi();
    },
    // 添加
    onAdd() {
      this.$refs["addSupplyinfoModal"].show();
    },
    // 导入
    onImport() {
      this.exportNutritionTagTemp = downloadFoodRaiseExcelTemplate;
      this.uploadNutritionTag = foodRaiseImportExcel;
      this.$refs["cusUploadNutritionTagModal"].show();
    },
    // 全选
    handleSelectAll() {
      this.$refs.selection.selectAll(true);
    },
    // 删除
    onDelete() {
      if (!this.selectData.length) {
        this.$Message.warning("请先选择要删除的数据内容.");
      } else {
        this.$Modal.confirm({
          title: "删除确认",
          content: `是否确认删除选中数据内容？`,
          onOk: () => {
            this.batchDeleteFoodRaiseApi();
          }
        });
      }
    },
    // 表格选项变化
    changeSelect(e) {
      this.selectData = e;
    },
    // 获取供应信息列表
    selectFoodRaisePageApi() {
      this.loading = true;
      return new Promise(resolve => {
        selectFoodRaisePage({
          foodName: this.form.foodName, // 食材名称
          foodTypeName: this.form.foodTypeName, // 季节
          supplyName: this.form.supplyName,
          current: this.pages.page,
          size: this.pages.pageSize
        }).then(res => {
          this.loading = false;
          if (res.retCode === 2000) {
            this.data = res.data.records;
            this.pages.pageTotal = res.data.total;
            resolve();
          }
        });
      });
    },
    // 获取商品分类
    productcategoryApi() {
      return new Promise(resolve => {
        productcategory({
          size: -1
        }).then(res => {
          if (res.retCode === 2000) {
            this.productcategoryList = res.data.records;
            resolve();
          }
        });
      });
    },
    // 导出供应食材二维码
    exportFoodRaiseQRCodeExcelApi() {
      this.$cu.showLoading();
      return new Promise(resolve => {
        exportFoodRaiseQRCodeExcel({}).then(res => {
          this.$cu.hideLoading(1);
          this.$Message.success("供应食材二维码导出成功.");
          let blob = new Blob([res], { type: `application/vnd.ms-excel` });
          let downloadElement = document.createElement("a");
          let href = window.URL.createObjectURL(blob);
          downloadElement.href = href;
          downloadElement.download = "供应食材二维码";
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement);
          window.URL.revokeObjectURL(href);
          resolve();
        });
      });
    },
    // 导出导出供应信息
    foodRaiseExportExcelApi() {
      this.$cu.showLoading();
      return new Promise(resolve => {
        foodRaiseExportExcel({
          foodName: this.form.foodName, // 食材名称
          foodTypeName: this.form.foodTypeName, // 季节
          supplyName: this.form.supplyName
        }).then(res => {
          this.$cu.hideLoading(1);
          this.$Message.success("供应信息导出成功.");
          let blob = new Blob([res], { type: `application/vnd.ms-excel` });
          let downloadElement = document.createElement("a");
          let href = window.URL.createObjectURL(blob);
          downloadElement.href = href;
          downloadElement.download = "供应信息列表";
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement);
          window.URL.revokeObjectURL(href);
          resolve();
        });
      });
    },
    // 批量删除供应信息
    batchDeleteFoodRaiseApi() {
      return new Promise(resolve => {
        let foodRaiseIdList = this.selectData.map(item => item.foodRaiseId);
        batchDeleteFoodRaise({
          foodRaiseIdList: foodRaiseIdList
        }).then(res => {
          if (res.retCode === 2000) {
            this.$Message.success("供应信息删除成功.");
            this.onInit();
            resolve();
          }
        });
      });
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.ivu-input-icon {
  height: 40px !important;
  line-height: 40px !important;
}
/deep/.ivu-form-item  {
  margin-bottom: 20px;
}
.content {
  // padding: 20px;
  &-bottom {
    background: #fff;
    border-radius: 6px;
    box-shadow: 1px 1px 2px 0px rgba(153, 182, 199, 0.2);
    padding: 20px;
  }
}

.formBox {
  width: 100%;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0px 4px 8px 0px rgba(108, 137, 165, 0.18);
  padding: 20px 20px 1px;
  display: flex;
  flex-wrap: wrap;
  &-item {
    margin-right: 48px;
  }
}
.mr_20 {
  margin-right: 20px;
}

.btnBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  // margin-bottom: 10px;
  &-item {
    display: flex;
  }
}
</style>
